<template>
    <div class="withdraw-order">
        <div class="order-list" v-if="orders.length">
            <OrderCard v-for="(order, index) in orders"
                :key="index"
                :good-type="order.type"
                :detail="order.detail"
                :link-id="order.link_id"
                :name="order.title"
                :cover="order.cover"
                :price="order.price"
                :final="order.final_payment"
                :delivery="order.delivery"
                :is-prepay="order.is_prepay"
                :buyer-confirm="order.buyer_confirm"
                :original-price="order.original_price"
                :coupon-pay="order.coupon_pay"
                :total-price="order.price"
                :status="order.status"
                :count="order.number"
                :buyer="order.name ? order.name : order.nickname"
                :shop="order.shop"
                :created-at="order.we_chat_pay_time"
                :is-complete="order.is_finish"
                :order="order">
            </OrderCard>
        </div>
        <ListEmpty v-else />
    </div>
</template>

<script lang="ts">
import store from '@/store';
import { Component, Vue } from 'vue-property-decorator';
import { Route } from 'vue-router';
import OrderCard from '@/features/manage/recommendOrderCard.vue';
import ListEmpty from '@/components/list/listEmpty.vue';

Component.registerHooks([
    'beforeRouteHook',
]);

@Component({
    name: 'WithdrawOrder',
    components: {
        OrderCard,
        ListEmpty,
    },
})
export default class WithdrawOrder extends Vue {
    public get withdrawDetailId() {
        return this.$route.params.withdrawDetailId;
    }
    public get orders() {
        return store.state.user.withdrawOrder[Number(this.withdrawDetailId)] || [];
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        const withdrawDetailId = to.params.withdrawDetailId;
        store.commit('utils/startRequest');
        await store.dispatch('user/getWithdrawOrder', {
            withdrawDetailId,
        });
        store.commit('utils/endRequest');
        next();
    }
}
</script>
